<script setup>
const props = defineProps(['activeIndex', 'enabled'])
defineEmits(['clickIndicator'])
const { y } = useWindowScroll()

const showPagination = computed(() => {
  let inRange = true
  if (process.client) {
    const innerHeight = window.innerHeight
    inRange = y.value < innerHeight * 0.25
  }
  return props.enabled && props.activeIndex !== 0 && y.value < 220 && inRange
})
</script>

<template>
  <ClientOnly>
    <div max-md:hidden>
      <div v-show="showPagination" class="pagination fixed left-[190px] top-[50%] z-2 flex flex-col animate-fade-in-up items-center text-[24px] text-[#fff] leading-[32px] home-animate" :class="[[0, 3].includes(activeIndex) ? 'dark' : 'light']">
        <ul class="w-[20px]">
          <li
            v-for="(item) in 4" :key="item"
            :class="{ active: item === activeIndex }"
            class="p-[8px] before:h-[20px] before:w-[20px] before:rounded-[20px]"
            @click="$emit('clickIndicator', item)"
          >
            <div class="indicator absolute left-[6px] top-[50%] h-[8px] w-[8px] translate-y-[-50%] rounded-[8px] bg-[#fff] opacity-60" />
          </li>
        </ul>
        <div class="mt-[32px] text-[32px] text-[var(--primary-color)]">
          {{ `0${activeIndex}` }}
        </div>
        <div v-show="activeIndex < 4" m="t-[8px]" text="[20px]">
          /
        </div>
        <div v-show="activeIndex < 4" m="t-[8px]" text="[20px]">
          04
        </div>
      </div>
    </div>
  </ClientOnly>
</template>

<style lang="postcss" scoped>
.pagination {
  &.dark {
    color: rgba(255, 255, 255, 0.6);
    .indicator {
      background: rgba(255, 255, 255, 0.4);
    }
  }
  &.light {
    color: rgba(0, 0, 0, 0.4);
    .indicator {
      background: rgba(0, 0, 0, 0.2);
    }
  }
  li {
    position: relative;
    display: flex;
    align-items: center;

    &.active {
      .indicator {
        opacity: 1;
        background-color: var(--primary-color) !important;
      }
      &::before {
        @apply block absolute translate-y-[-50%] top-[50%] left-0 bg-transparent border-[2px] border-solid border-[var(--primary-color)] content-[''];
      }
    }
  }
  li + li {
    margin-top: 32px;
  }
}
</style>
